import React, { useRef, useState, useEffect } from 'react';
import { connect } from 'umi';
import { Drawer, Space, Button, Steps, Form } from 'antd';
import DataEntry from './components/DataEntry';
import FormData from './components/FormData';
import SceneForm from './components/SceneForm';
import UploadOss from '@/utils/aliOssUpload';
import moment from 'moment';
import './index.less';
const GatherEdit = (props) => {
  const { onClose, visible, dispatch, handleCallback } = props;
  const { show = false, detail = {} } = visible;
  const { Step } = Steps;
  useEffect(() => {
    if (!show) {
      setData({ content: [] });
      setStep(1);
    } else {
      setData({
        ...data,
        ...detail,
      });
    }
  }, [show]);
  const [step, setStep] = useState(1);
  const [data, setData] = useState({
    content: [],
  });
  const ref = useRef(null);
  const [form] = Form.useForm();
  const StepFooter = {
    1: (
      <Space>
        <Button onClick={onClose}>取消</Button>
        <Button
          type="primary"
          onClick={() => {
            setStep(() => {
              setData({
                ...data,
                content: ref.current.fetchData,
              });
              return 2;
            });
          }}
        >
          下一步
        </Button>
      </Space>
    ),
    2: (
      <Space>
        <Button onClick={() => setStep(1)}>上一步</Button>
        <Button
          type="primary"
          onClick={() => {
            form.validateFields().then(async (val) => {
              const obj = {
                ...data,
                ...val
              }
              const { content, qrcodeUrl, startTime } = obj;

              let img = (await UploadOss(qrcodeUrl)) || '';
              dispatch({
                type: 'liveStreaming/fakeInformationCollection',
                payload: {
                  ...obj,
                  content: JSON.stringify(content),
                  qrcodeUrl: img.toString(),
                  startTime: startTime ? moment(startTime[0]).format('YYYY-MM-DD') : '',
                  endTime: startTime ? moment(startTime[1]).format('YYYY-MM-DD') : '',
                },
                callback: () => {
                  onClose();
                  handleCallback();
                },
              });
              setStep(() => {
                setData({
                  ...data,
                  ...val,
                });
                return 3;
              });
            });
          }}
        >
          确定
        </Button>
      </Space >
    ),
    // 3: (
    //   <Space>
    //     <Space>
    //       <Button onClick={() => setStep(2)}>上一步</Button>
    //       <Button
    //         type="primary"
    //         onClick={async () => {
    //           const { content, qrcodeUrl } = data;
    //           let img = (await UploadOss(qrcodeUrl)) || '';
    //           dispatch({
    //             type: 'liveStreaming/fakeInformationCollection',
    //             payload: {
    //               ...data,
    //               content: JSON.stringify(content),
    //               qrcodeUrl: img.toString(),
    //             },
    //             callback: () => {
    //               onClose();
    //             },
    //           });
    //         }}
    //       >
    //         确定
    //       </Button>
    //     </Space>
    //   </Space>
    // ),
  }[step];
  const { content } = data;
  const StepRender = {
    1: <DataEntry defaultData={content} ref={ref}></DataEntry>,
    2: <FormData detail={data} form={form}></FormData>,
    // 3: <SceneForm></SceneForm>,
  }[step];
  return (
    <Drawer
      title="新建信息采集"
      onClose={onClose}
      open={show}
      placement={'top'}
      height={'100%'}
      extra={StepFooter}
    >
      <div className="gatherEdit_box">
        <Steps current={step}>
          <Step title="编辑表单" />
          <Step title="采集设置" />
          {/* <Step title="选择采集场景" /> */}
        </Steps>
        {StepRender}
      </div>
    </Drawer>
  );
};
export default connect(({ loading }) => ({
  loading: loading.models.liveStreaming,
}))(GatherEdit);
